<template>
	<div style="background-color: white;">
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="按日期" name="first"></el-tab-pane>
			<el-tab-pane label="按明细" name="third"></el-tab-pane>
		</el-tabs>
	</div>
	<div v-if="activeName === 'first'" class="first">
		<div class="top-form">
			<div>
				<form style="overflow: hidden;">
					<div style="width: 600px; float: left;margin-right: 20px;margin-top: 10px;">
						<el-form-item label="缴费时间">
							<el-col :span="11">
								<el-date-picker type="date" placeholder="开始" style="width: 100%;" />
							</el-col>
							<el-col :span="2" class="text-center">
								<span class="text-gray-500">至</span>
							</el-col>
							<el-col :span="11">
								<el-date-picker placeholder="结束" style="width: 100%;" />
							</el-col>
						</el-form-item>
					</div>
					<div style="width: 200px; float: left;margin-top: 10px;">
						<el-form-item label="支付方式">
							<el-select placeholder="请选择" style="height: 40px;"></el-select>
						</el-form-item>
					</div>
					<div style="width: 400px; float: left;margin-top: 10px;">
						<el-button class="ft-but1">重置</el-button>
						<el-button class="ft-but2">查询</el-button>
					</div>
				</form>
			</div>
		</div>
		<div class="on-tab">
			<div>
				<el-table :data="tableData" style="width: 100%">
				    <el-table-column prop="date" label="日期" width="400" />
				    <el-table-column prop="name" label="缴费金额" width="200" />
				    <el-table-column prop="address" label="缴费次数" />
					<el-table-column prop="address" label="缴费笔数" />
				  </el-table>
			</div>
		</div>
		<div class="be">
			<div style="width: 100%; height: 400px;" ref="chart"></div>
		</div>
	</div>
	<div v-if="activeName === 'third'" class="third">
		<div style="display: flex; margin-top: 10px;background-color: white; border-radius: 10px;padding: 10px 16px;">
			<form style="overflow: hidden;">
				<el-form-item label="计费对象" style="width: 300px; float: left; margin-right: 20px;">
					<el-select placeholder="请选择"></el-select>
				</el-form-item>
				<el-form-item label="计费项目" style="width: 250px; float: left;margin-right: 20px;">
					<el-select placeholder="请选择"></el-select>
				</el-form-item>
				<el-form-item label="支付方式" style="width: 200px; float: left; margin-right: 20px;">
					<el-select placeholder="请选择"></el-select>
				</el-form-item>
				<el-form-item>
					<el-input placeholder="请输入收据编号"></el-input>
				</el-form-item>
				<el-form-item label="收款时间" style="width: 400px; float: left;margin-right: 20px;">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="开始" style="width: 100%;margin-right: 20px;" />
					</el-col>
					<el-col :span="2" class="text-center">
						<span class="text-gray-500">至</span>
					</el-col>
					<el-col :span="11">
						<el-date-picker placeholder="结束" style="width: 100%;margin-right: 20px;" />
					</el-col>
				</el-form-item>
				<el-form-item label="操作员" style="width: 400px; float: left;margin-right: 20px;">
					<el-select placeholder="请选择"></el-select>
				</el-form-item>
				<el-button class="ft-but1">重置</el-button>
				<el-button class="ft-but2">查询</el-button>
			</form>
		</div>
		<div style="margin-top: 20px;">
			<el-table :data="tableData" style="width: 100%">
			    <el-table-column prop="date" label="房屋"/>
			    <el-table-column prop="name" label="面积"/>
			    <el-table-column prop="address" label="业主" />
				<el-table-column prop="address" label="联系电话" />
				<el-table-column prop="address" label="计费项目" />
				<el-table-column prop="address" label="费用周期" />
				<el-table-column prop="address" label="垃圾处理费" />
				<el-table-column prop="address" label="水费" />
				<el-table-column prop="address" label="电费" />
				<el-table-column prop="address" label="物业管理费" />
				<el-table-column prop="address" label="燃气管道安装费" />
				
			  </el-table>
		</div>
	</div>

</template>
<script lang="ts" setup>
	import * as echarts from 'echarts';
	import { onMounted, ref } from 'vue';
	import type { TabsPaneContext } from 'element-plus'

	const activeName = ref('first')

	const handleClick = (tab : TabsPaneContext, event : Event) => {
		console.log(tab, event)
	}
	
	const chart = ref(null);
	
	onMounted(() => {
	  const myChart = echarts.init(chart.value);
	
	  const option = {
	    title: {
	      text: 'Log Axis',
	      left: 'center'
	    },
	    tooltip: {
	      trigger: 'item',
	      formatter: '{a} <br/>{b} : {c}'
	    },
	    legend: {
	      left: 'left'
	    },
	    xAxis: {
	      type: 'category',
	      name: 'x',
	      splitLine: { show: false },
	      axisLabel: {
	        formatter: function (value) {
	          // Show only first and last date labels
	          if (value === '2024-07-12' || value === '2024-07-04') {
	            return value;
	          } else {
	            return '';
	          }
	        }
	      },
	      data: [
	        '2024-07-12',
	        '2024-07-11',
	        '2024-07-10',
	        '2024-07-09',
	        '2024-07-08',
	        '2024-07-07',
	        '2024-07-06',
	        '2024-07-05',
	        '2024-07-04'
	      ]
	    },
	    grid: {
	      left: '3%',
	      right: '4%',
	      bottom: '3%',
	      containLabel: true
	    },
	    yAxis: {
	      type: 'log',
	      name: 'y',
	      minorSplitLine: {
	        show: true
	      }
	    },
	    series: [
	      {
	        name: '缴费金额',
	        type: 'line',
	        data: [100, 3, 9, 27, 81, 247, 200, 2, 600]
	      },
	      {
	        name: '缴费次数',
	        type: 'line',
	        data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
	      },
	      {
	        name: '缴费笔数',
	        type: 'line',
	        data: [10, 20, 4, 80, 106, 302, 600, 128, 256]
	      }
	    ]
	  };
	
	  myChart.setOption(option);
	});
</script>

<style scoped>
	.top-form {
		margin-top: 10px;
		background-color: white;
		padding: 8px 16px;
		border-radius: 10px;
		display: flex;
	}

	.ft-but1 {
		min-width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0 20px;
		color: #7e8081;
		background-color: #fafafa;
		border: none;
	}

	.ft-but2 {
		margin-left: 10px;
		min-width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0 20px;
		color: #fff;
		background-color: #00c36d;
		border-color: #00c36d;
	}
	.el-table th .cell {
	  text-align: center; /* Center align the text in table headers */
	}
	.el-table{
		border-radius: 10px;
	}
	.on-tab{
		margin-top: 10px;
	}
	.be{
		background-color: white;
		margin-top: 10px;
		border-radius: 10px;
	}
</style>